import React, { useRef } from "react";

type InputBoxParams = {
  type: 'text' | 'password' | undefined;
  onInput: (e: string) => void;
  value: string;
  showIcon: boolean | undefined
}

interface MyInputEventTarget extends EventTarget {
  value: string
}

interface MyHtmlElementInput extends React.FormEvent<HTMLInputElement> {
  target: MyInputEventTarget
}

const InputBox: React.FC<InputBoxParams> = (props) => {
  const onInput: (params: MyHtmlElementInput) => void = (params) => {
    props.onInput(params.target.value)
  }
  const inputRef: React.LegacyRef<HTMLInputElement> | undefined = useRef(null);
  const iconClick = () => {
    if (inputRef.current?.type === 'password') {
      inputRef.current!.type = 'text'
      inputRef.current.focus()
    } else {
      inputRef.current!.type = 'password'
      inputRef.current?.focus()
    }
  }
  return (
    <>
      <div className="input-box">
        <input type={props.type ? props.type : 'text'} onInput={onInput} value={props.value} ref={inputRef} />
        {props.showIcon && (<svg id="dunpai" className="icon" viewBox="0 0 1024 1024" version="1.1"
          xmlns="http://www.w3.org/2000/svg" p-id="2095" width="200" height="200" onClick={iconClick}>
          <path
            d="M512 170.666667c107.093333 66.986667 214.186667 120.576 321.28 160.64 0 262.826667-107.093333 436.821333-321.28 522.026666l-0.682667-0.256-0.597333 0.256c-213.333333-85.205333-320-259.2-320-522.026666 106.666667-40.106667 213.333333-93.610667 320-160.64l0.64 0.426666L512 170.666667z m0 85.333333v512c160.64-63.914667 240.938667-194.432 240.938667-391.509333C672.64 346.410667 592.298667 306.261333 512 256z"
            fill="#165fcf" p-id="2096"></path>
        </svg>)}
      </div>
    </>
  )
}

export default InputBox